<template>
	<div class="icons">
		<ul>
			<li v-for="item in list" :key="item.id">
				<img :src="item.imgURL" >
				<p>{{item.word}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'Icons',
		data(){
			return{
				list:[
					{id:1,imgURL:'igs/1.png',word:'周边游'},
					{id:2,imgURL:'igs/2.png',word:'国内游'},
					{id:3,imgURL:'igs/3.png',word:'出境游'},
					{id:4,imgURL:'igs/4.png',word:'自由行'},
					{id:5,imgURL:'igs/5.png',word:'酒店民宿'},
				],	
			}
		}
	}
</script>

<style scoped>
	.icons{
		width: 100%;
	}
	.icons ul{
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	.icons ul li{
		text-align: center;
		width: 20%;
	}
	.icons ul li img{
		padding-top: 1.4rem;
		width: 1.3rem;
		height: 1.3rem;
	}
	
</style>
